<template>
  <div class="box_item">
    <div class="tabs">
      <div :class="{ active: activeIndex === 0, tab: true }" @click="changeTabs(0)">业务&指标</div>
      <div :class="{ active: activeIndex === 1, tab: true }" @click="changeTabs(1)">应用&数据</div>
      <div :class="{ active: activeIndex === 2, tab: true }" @click="changeTabs(2)">组件&感知</div>
    </div>

    <div v-if="activeIndex === 0">
      <BusinessIndicators />
    </div>
    <div v-else-if="activeIndex === 1">
      <ApplicationData />
    </div>
    <div v-else>
      <ComponentPerception />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
import BusinessIndicators from "./businessIndicators.vue";
import ApplicationData from "./applicationData.vue";
import ComponentPerception from "./componentPerception.vue";

const activeIndex = ref(0);

const changeTabs = (index) => {
  activeIndex.value = index;
};
</script>
<style scoped langs="scss">
.box_item {
  height: 321px;
  background-image: url("../../img/sjzlybtz.png");

  .tabs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 40px;
    font-family: Alibaba PuHuiTi 2;

    .tab {
      width: 336px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #0c3175;
      font-size: 16px;
      border-radius: 4px;
      cursor: pointer;
    }

    .active {
      background: #084ac1 !important;
    }
  }
}
</style>
